import React, { useState } from 'react'

function Father1() {
    const [q, setQ] = useState(1000)
    const huaQ = (hq) => {
        setQ(q - hq)
    }
    return (
        <div>
            <h1>我是父组件</h1>
            <button onClick={() => { setQ(q + 100) }}>赚钱</button>
            <Child1 q={q} huaQ={huaQ} >
            <span>我是插槽</span>
            </Child1>
        </div>
    )
}
function Child1(props) {
    return (
        <div>
            <h1>我是子组件</h1>
            {props.children}
            <p>我爹的钱：{props.q}</p>
            <button onClick={() => { props.huaQ(100) }}>花钱100</button>
        </div>
    )
}




export default function Communication() {
    return (
        <div>
            <h1>组件通信</h1>
            <div style={{ border: '1px solid red', padding: '10px' }}>
                <h2>父传子,子传父</h2>
                <Father1/>
            </div>
        </div>
    )
}
